<template>
	<view class="shopHeadAre">
		<view>
			<view class="signageAre">
				<image :src="signageImg" class="signageImg"></image>
				<image :src="shopImg" class="shopImg"></image>
			</view>
			<view class="display column calc shopItemAre">
				<text class="shopName">{{shopName}}</text>
				<text class="pColor">{{shopContent}}</text>
			</view>
		</view>
		<view class="display flow shopTitleAre topFixed" :style="{'height': (shopType==1?'150rpx':'120rpx')}">
			<view class="display flow shopAre">
				<image :src="shopImg" class="shopImg2"></image>
				<view class="display column shopItem" :style="{'justify-content': (shopType==1?'space-between':'center')}">
					<text>{{shopName}}</text>
					<text class="subTitle" v-if="shopType==1">{{shopList.buy_now_num}}件在售商品 | 已售{{shopList.buy_ago_num}}件<text v-if="favNum!=0"> | {{favNum}}人收藏</text></text>
				</view>
			</view>
			<view class="display column btnAre">
				<uni-fav :checked="isFav" class="favBtn" :circle="circle" :bg-color="themeColor" :bg-color-checked="themeColor" fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick" v-if="shopType==1" />
				<button class="display flow shareBtn" @click="shareClick">
					<image src="/static/images/icon/share.png" ></image>
					<text>分享</text>
				</button>
			</view>
		</view>
		<uni-popup ref="showtip" :mask-click="false" :type="popType" @change="loginChange">
			<loginPop class="pop" @cancel="loginCancel"></loginPop>
		</uni-popup>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import loginPop from '@/components/loginPop.vue'
	export default {
		name: 'shopHeadAre',
		components: {loginPop},
		props:['shopList','favNum','shopType','isFav'],
		data() {
			return {
				circle: true,
				popType: '',
				themeColor: this.global.themeColor
			};
		},
		computed:{
			...mapState(['hasLogin']),
			signageImg(){
				let img = this.shopType==1?this.shopList.back_img:this.shopList.back_img
				return img
			},
			shopImg(){
				let img = this.shopType==1?this.shopList.supplier_img:this.shopList.head_img
				return img
			},
			shopName(){
				let name = this.shopType==1?this.shopList.supplier_name:this.shopList.shop_name
				return name
			},
			shopContent(){
				let text = this.shopType==1?this.shopList.supplier_content:this.shopList.shop_content
				return text
			},
		},
		methods:{
			shareClick(){
				if(this.hasLogin){
					this.$emit('shareClick')
				}else{
					this.toggleLoginPopup('center','tip')
				}
			},
			favClick(){
				this.$emit('favClick')
			},
			toggleLoginPopup(type,open) {
				this.popType = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			loginCancel(type){
				this.$refs['show' + type].close()
			},
			loginChange(e) {
				console.log('是否打开:' + e.show)
			},
		}
	}
</script>

<style lang="scss">
	.shopHeadAre{
		@include width;
		@include font;
		z-index: 99;
		.signageAre{
			@include widthHeight(100%,320rpx);
			position: relative;
			.signageImg{
				@include widthHeight(100%,320rpx);
			}
			.shopImg{
				@include widthHeight(120rpx);
				position: absolute;
				left: 50%;
				bottom: -60rpx;
				@include margin(-60rpx,'left');
				@include borderR(10rpx);
			}
		}
		.shopItemAre{
			@include margin(80rpx auto 60rpx)
			align-items: center;
			.shopName{
				@include font($fontSize + 4rpx);
				@include margin(30rpx,'bottom');
			}
		}
		.shopTitleAre{
			@include width;
			@include rgba($blackColor,0.5);
			@include padding(0 30rpx);
			.shopAre{
				@include justify-content('s');
				.shopImg2{
					@include widthHeight(100rpx);
					@include borderR(10rpx);
				}
				.shopItem{
					height: 80rpx;
					@include font($fontSize + 4rpx,white);
					@include margin(20rpx,'left');
					.subTitle{
						@include font($fontSize - 6rpx,$eightyGreyColor);
					}
				}
			}
			.btnAre{
				align-items: center;
				@include font($fontSize - 4rpx,white);
				.shareBtn{
					@include widthHeight(130rpx,50rpx);
					@include backG($greyColor,white);
					@include borderR(25rpx);
					@include margin(10rpx,'top');
					@include justify-content;
					@include font($fontSize - 4rpx);
					&>image{
						@include widthHeight(24rpx);
						@include margin(10rpx,'right');
					}
				}
			}
		}
	}
</style>
